<template>
	<view class="bg-gradual-blue">
		<view class="DrawerPage" :class="modalName=='viewModal'?'show':''">
			<view class="pro_list">
				<cu-custom bgColor="bg-gradual-blue" :isBack="true">
					<block slot="backText">返回</block>
					<block slot="content">商品列表</block>
				</cu-custom>		
				<search :type="true" @search="params.name = $event" :placeholder="'请输入商品名称'"></search>
				<view class="tabs">
					<cu-tabs :list="tabs" :act="o.sort" @change="changeTab"></cu-tabs>
				</view>
				<view class="main">
					<scroll-view scroll-y>
						<view class="list" v-if="list.length">
							<view hover-class="none" class="item" v-for="(item, idx) in list" :key="idx">
								<navigator class="logo" :url="'/pages/orders/productinfo?supply_id='+item.supply_id+'&pid='+item.id">
									<view class="tag">{{ item.discount }}折</view>
									<image :src="item.default_imgurl"></image>
								</navigator>
								<view class="desc">
									<view class="name text-black">{{ item.name }}</view>
									<view class="price">
										<view class="text-price">{{ item.now_price }}</view>
										<view class="text-price">{{ item.orgin_price }}</view>
									</view>
									<view class="sell cu-capsule">
										<view class="cu-tag bg-red">已售</view>
										<view class="cu-tag line-red">{{ item.sell_count }}</view>
									</view>
								</view>
								<view class="cart">
									<wx-auth :type="1" v-if="!userInfo" :link="{ link: true }"></wx-auth>
									<text class="lg text-gray icon-cart" @tap="showProps(item)"></text>
								</view>
							</view>
						</view>
						<empty-data v-else>什么也没有~</empty-data>
					</scroll-view>
				</view>
				<select-props @select="selectAttrs" v-model="show" :attrPrice="AttrPrice" :ProductBody="ProductBody" :attr="Attributes" @add="addCart"></select-props>
			</view>			
		</view>
		<view class="DrawerClose" :class="modalName=='viewModal'?'show':''" @tap="hideModal">
			<text class="icon-pullright"></text>
		</view>
		<scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''">
			<block v-for="(item, idx) in listType" :key="idx">
				<view class="cu-list card-menu">
					<view class="cu-bar bg-white solid-bottom">
						<view class="action">
							<text class="text-red margin-right-xs" :class="item.title.type === 'type' ? 'icon-list' : 'icon-recharge'"></text>{{ item.title.name }}
						</view>
					</view>			
					<view class="cu-list menu">
						<block v-for="(m, index) in item.list" :key="index">
							<view @tap="category(m, item)" :class="['cu-item', { arrow: m.curCostMin !== 1 }]">
								<view class="content">
									<block v-if="item.title.type === 'type'">
										<text class="text-grey">{{ m.name }}</text>
									</block>
									<block v-else>
										<view class="text-gray">
											<block v-if="m.curCostMax === -1">全部</block>
											<block v-else-if="m.curCostMin === 1">
												<view class="cu-form-group">
													<view class="title">自定义</view>
													<input placeholder="min" name="input" v-model="params.curCostMin"></input>
													<input placeholder="max" name="input" v-model="params.curCostMax"></input>
												</view>											
											</block>
											<block v-else>
												<text class="text-price">{{ m.curCostMin }} - {{ m.curCostMax }}</text>
											</block>
										</view>
									</block>
								</view>
							</view>
						</block>
					</view>	
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import Search from '@/components/search'
	import { shopDetail, AttriBute } from '@/common/api/shop'
	import { mapGetters } from 'vuex'
	import { baseURL } from '@/common/utils/config'
	import SelectProps from './components/props'
	export default {
		name: 'shopPro',
		components: { Search, SelectProps },
		computed: {
			...mapGetters([
				'userInfo'
			])
		},		
		data () {
			return {
				modalName: null,
				shop: {}, //店铺信息
				CartList: uni.getStorageSync('ShopCart') || [],
				ProductBody: {}, // 产品信息
				AttrPrice: [], // 产品对应属性信息
				Attributes: [], // 产品属性
				show: false, // 产品属性弹窗
				tabs: [ // 导航
					{name: '默认', act: '1'},
					{name: '销量', act: '2'},
					{name: '价格', act: '3'},
					{name: '时间', act: '4'},
					{name: '筛选', act: '5' }
				],
				listType: [], // 分类列表
				list: [], // 产品列表
				params: {
					type_ids: '',
					curCostMin: '',
					curCostMax: '',
					name: '',
					id: ''
				},
				o: {
					sort: '0',
					sort_type: 'asc'
				}
			}
		},
		watch: {
			params: {
				handler (val, oldval) {
					if (JSON.stringify(this.o) === '{}') {
					    this.getList()
					}
				},
				deep: true
			},
			o: {
				handler (val, oldval) {
					if (JSON.stringify(val) !== '{}') {
					    this.getList()						
					}
				},
				deep: true
			}
		},
		onLoad (options) {
			this.params.id = options.id
			if (options.act) this.o.sort = options.act
		},
		methods: {
			selectAttrs(args) {
				let k = this.Attributes[args[0]].parent_pros[args[1]]
				this.Attributes[args[0]].parent_pros.forEach(item => {
					if (item.id !== k.id) item.checked = false
				})
				k.checked = !k.checked
			},
			category (m, item) {
				if (m.curCostMin !== 1) {
					if (item.title.type === 'type') {
						this.params.curCostMin = this.params.curCostMax = ''
						this.params.type_ids = m.id
					} else {
						if (m.curCostMin === -1) { 
							this.params.curCostMin = this.params.curCostMax = ''				
						}
					}
					this.hideModal()						
				}
			},
			changeTab (e) {
				if (+e.act !== 5) {
					this.$set(this.o, 'sort', e.act)
					this.$set(this.o, 'sort_type', 'asc')
					this.params.curCostMin = this.params.curCostMax = ''
				}
				if (+e.act === 5) {
					this.o = {}
					this.$set(this.o, 'sort', e.act)
					this.modalName = 'viewModal'
				}
			},
			addCart (item) {
				let idx = (() => {
					for (let i = 0;i < this.CartList.length;i++) {
						if (this.CartList[i].shop.id === this.shop.id) {
							return i
						}
					}
					return -1 // 没有在购物车里面找到相应的店铺
				})()
			   if (idx === -1)	{
				this.CartList.push({ shop: this.shop, list: [item] })
				uni.setStorageSync('ShopCart', this.CartList)
				uni.showToast({ title: '加入成功' })						
			   } else {
				   let ix = (() => {
					   for (let i = 0;i < this.CartList[idx].list.length;i++) {
						   if (this.CartList[idx].list[i].id === item.id && this.CartList[idx].list[i].prope === item.prope && this.CartList[idx].list[i].property_id === item.property_id) {
							   return i
						   }
					   }
					   return -1
				   })()
				   if (ix !== -1) {
					   this.CartList[idx].list[ix].rcount++
					   uni.setStorageSync('ShopCart', this.CartList)
					   uni.showToast({ title: '加入成功' })
				   } else {
					   this.CartList[idx].list.push(item)
					   uni.setStorageSync('ShopCart', this.CartList)
					   uni.showToast({ title: '加入成功' })
				   }							   
			   }				
			},
			showProps (item) {
				uni.showLoading({ mask: true })
				this.ProductBody = item
				AttriBute({ pid: item.id }).then(res => {
					uni.hideLoading()					
					if (res.pros_data.length) {
						this.show = true
						this.AttrPrice = res.product_prices
						this.Attributes = res.pros_data.map(item => { 
							item.parent_pros = item.parent_pros.map(x => {
								  x.checked = false
								  x.name = x.pro_name
								  return x
							})
							return item
						})							
					} else {
						this.addCart(item)
					}
				})
			},
			getList () {
				uni.showLoading()
				shopDetail(Object.assign({}, this.params, this.o)).then(res => {
					uni.hideLoading()
					let shop = {
						shop_name: res.recommend.shop_name,
						address: res.recommend.address,
						id: res.recommend.id
					}
					this.shop = shop
					this.list = res.shop_list.map(item => {
						item.checked = true
						item.rcount = 1
						item.default_imgurl = baseURL + item.default_imgurl
						item.discount = this.utils.Fxied(this.utils.accMul(this.utils.accEqu(item.now_price, item.orgin_price), 10), 1)
						item.property_id = ''
						item.prope = ''
						return item
					})
					res.product_type.unshift({name: '全部', id: ''})
					const type = {
						title: { name: '分类', type: 'type' },
						list: res.product_type
					}
					const price = {
						title: { name: '价格', type: 'price' },
						list: [
							{curCostMin: -1, curCostMax: -1},
							{curCostMin: 1, curCostMax: 1 }
						]
					}
					this.listType = []
					this.listType.push(type, price)
				})			
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}			
		}
	}
</script>

<style lang="less">
@import '../common/styles/variables.less';
.pro_list {
	display: flex;
	flex-direction: column;
	flex-flow: column;
	height: 100%;
	overflow: hidden;
	& > .tabs {
	    box-shadow: 0 20upx 34upx #dedede;
		position: relative;
		z-index: 99;
	}
	.main {
		flex: 1;
		overflow: hidden;
		position: relative;			
		scroll-view {		
			height: 100%;
			.list {
				.item {
					padding: 20upx 15upx;
					background-color: white;
					position: relative;
					&:not(:last-of-type) {
						.border-bottom(15upx);
					}
					display: flex;
					.logo {
						width: 200upx;
						height: 200upx;
						position: relative;
						margin-right: 20upx;
						.tag {
							position: absolute;
							top: 0;
							right: 0;
							z-index: 33;
							background-color: @red;
							color: white;
							font-size: @minSize;
							padding: 4upx 15upx;
						}
						image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
					.desc {
						.name {
							font-size: @title;
						}
						.price {
							display: flex;
							margin-top: 20upx;
							& > view {
								&:nth-of-type(1) {
									color: @red;
									font-weight: 600;
									margin-right: 20upx;
								}
								&:nth-of-type(2) {
									text-decoration: line-through;
									color: @gray;
								}
							}
						}
						.sell {
							margin-top: 20upx;
						}
					}
					.cart {
						background-color: @red;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 50upx;
						border-radius: 50%;
						width:  70upx;
						height: 70upx;
						display: flex;
						align-items: center;
						justify-content: center;
						.lg {
							color:white;
							font-size: 40upx;
						}
					}
				}
			}
		}
	}
}	
	// draw
	page {
		background-image: var(--gradualBlue);
		width: 100vw;
		overflow: hidden;
	}
	.DrawerPage {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0vw;
		background-color: #f1f1f1;
		transition: all 0.4s;
	}

	.DrawerPage.show {
		transform: scale(0.9, 0.9);
		left: 85vw;
		box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
		transform-origin: 0;
	}

	.DrawerWindow {
		position: absolute;
		width: 85vw;
		height: 100vh;
		left: 0;
		top: 0;
		transform: scale(0.9, 0.9) translateX(-100%);
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
		padding: 100upx 0;
	}

	.DrawerWindow.show {
		transform: scale(1, 1) translateX(0%);
		opacity: 1;
		pointer-events: all;
	}

	.DrawerClose {
		position: absolute;
		width: 40vw;
		height: 100vh;
		right: 0;
		top: 0;
		color: transparent;
		padding-bottom: 30upx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
		letter-spacing: 5px;
		font-size: 50upx;
		opacity: 0;
		pointer-events: none;
		transition: all 0.4s;
	}

	.DrawerClose.show {
		opacity: 1;
		pointer-events: all;
		width: 15vw;
		color: #fff;
	}	
</style>
